<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <BlogHeader />
    <el-divider content-position="center">分类</el-divider>
    <el-container>
      <el-aside width="200px"> </el-aside>
      <el-main>
        <br />
        <div class="case-index-content">
          <ul class="clearfix">
            <li class="case-example-item">
              <router-link to="/essay">
                <img :src="imgUrl1" alt="" class="case-pad" />
                <div class="case-item-info">
                  <div class="case-info-logo"></div>
                  <div class="case-info-title">随笔</div>
                  <div class="case-info-text">
                    记录生活中的点点滴滴，走过的路，看过的风景，吃过的美食，爱过的人，都是回味无穷的故事呀。
                  </div>
                </div>
              </router-link>
            </li>
            <li class="case-example-item">
              <router-link to="/story">
                <img :src="imgUrl2" alt="" class="case-pad" />
                <div class="case-item-info">
                  <div class="case-info-logo"></div>
                  <div class="case-info-title">小故事</div>
                  <div class="case-info-text">
                    博主无聊的时候编的各种脑洞小故事，可甜可虐。
                  </div>
                </div>
              </router-link>
            </li>
            <li class="case-example-item">
              <router-link to="/design">
                <img :src="imgUrl3" alt="" class="case-pad" />
                <div class="case-item-info">
                  <div class="case-info-logo"></div>
                  <div class="case-info-title">设计模式</div>
                  <div class="case-info-text">
                    23种常用设计模式
                  </div>
                </div>
              </router-link>
            </li>
            <li class="case-example-item">
              <router-link to="/web">
                <img :src="imgUrl4" alt="" class="case-pad" />
                <div class="case-item-info">
                  <div class="case-info-logo"></div>
                  <div class="case-info-title">Web</div>
                  <div class="case-info-text">
                    和web相关的文章
                  </div>
                </div>
              </router-link>
            </li>
            <li class="case-example-item">
              <router-link to="/crawler">
                <img :src="imgUrl5" alt="" class="case-pad" />
                <div class="case-item-info">
                  <div class="case-info-logo"></div>
                  <div class="case-info-title">爬虫</div>
                  <div class="case-info-text">
                    python爬虫
                  </div>
                </div>
              </router-link>
            </li>
            <li class="case-example-item">
              <router-link to="/go">
                <img :src="imgUrl6" alt="" class="case-pad" />
                <div class="case-item-info">
                  <div class="case-info-logo"></div>
                  <div class="case-info-title">Go</div>
                  <div class="case-info-text">
                    Go相关笔记
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </el-main>
    </el-container>
    <BlogFooter />
  </div>
</template>

<script>
import BlogHeader from "@/components/BlogHeader.vue";
import BlogFooter from "@/components/BlogFooter.vue";
import axios from "axios";

export default {
  name: "Topic",
  components: { BlogHeader, BlogFooter },

  data: function() {
    return {
      info1: "",
      info2: "",
    };
  },
  mounted() {
    axios
      .get("/api/article/?page=1")
      .then((response) => (this.info1 = response.data));
    axios
      .get("/api/article/?page=2")
      .then((response) => (this.info2 = response.data));
  },

  methods: {
    toUrl(url) {
      //window.location.href=url;
      window.open(url, "_blank");
    },
    handleChange(val) {
      console.log(val);
    },
  },

  created() {
    let urlTemp1 = "static/img001.jpg";
    this.imgUrl1 = require("@/" + urlTemp1);
    let urlTemp2 = "static/img002.jpg";
    this.imgUrl2 = require("@/" + urlTemp2);
    let urlTemp3 = "static/img003.jpg";
    this.imgUrl3 = require("@/" + urlTemp3);
    let urlTemp4 = "static/img004.jpg";
    this.imgUrl4 = require("@/" + urlTemp4);
    let urlTemp5 = "static/img005.jpg";
    this.imgUrl5 = require("@/" + urlTemp5);
    let urlTemp6 = "static/img006.jpg";
    this.imgUrl6 = require("@/" + urlTemp6);
  },
};
</script>

<style scoped>
.link:hover {
  color: LightSkyBlue;
  cursor: pointer;
}
.sub-title {
  text-align: center;
  text-decoration: none;
  padding: 10px;
}
.sub-title:hover {
  color: lightskyblue;
}

html,
body {
  color: #333;
  margin: 0;
  height: 100%;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #000;
}
img {
  border: 0;
}
body {
  background: #f4f5f9;
  color: #666;
}
html,
body,
div,
dl,
dt,
dd,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
button,
fieldset,
form,
input,
legend,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #08acee;
}
button {
  outline: 0;
}
img {
  border: 0;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
}
li {
  list-style: none;
}
a {
  color: #666;
}
a:hover {
  color: #eee;
}
.clearfix::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.clearfix {
}
/* 必要布局样式css */
.case-container {
  width: 1200px;
  margin: 0 auto;
  padding: 0;
}
.case-index-title {
  font-size: 16px;
  text-align: center;
  padding: 50px 0;
}
.case-index-title h2 {
  font-size: 36px;
  font-family: pingfang, "Microsoft Yahei", "HanHei SC", PingHei, "PingFang SC",
    "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC",
    "WenQuanYi Micro Hei", sans-serif;
  font-weight: normal;
}
.case-index-title a {
  width: 100px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #dbdce0;
  text-align: center;
  font-size: 14px;
  display: block;
  margin: 25px auto 0;
  transition: all 0.2s;
}
.case-index-title a:hover {
  background: #f96a69;
  border-color: #f96a69;
  color: #fff;
}
.case-index-content {
  position: relative;
}
.case-index-content ul {
  margin-right: -18px;
}
.case-example-item {
  float: left;
  width: 286px;
  height: 315px;
  overflow: hidden;
  margin: 0 18px 18px 0;
  text-align: center;
  background: #fff;
  position: relative;
  transition: all 0.2s;
}
.case-example-item a .case-pad {
  width: 286px;
  height: 180px;
}
.case-item-info {
  height: 135px;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  transition: all 0.2s;
}
.case-info-logo {
  margin-top: 0;
  margin-bottom: 8px;
  height: 80px;
  transition: all 0.2s;
}
.case-info-title {
  font-size: 16px;
  font-weight: 700;
  color: #646466;
  margin-bottom: 35px;
}
.case-info-text {
  font-size: 14px;
  color: #666;
  padding: 0 30px;
  text-align: left;
  line-height: 1.8;
}
.case-index-content .case-example-item:hover .case-item-info {
  height: 315px;
}
</style>
